<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工表练习</title>
</head>
<body>
    <input type="text" id="name" placeholder="请输入员工姓名">
    <input type="text" id="salary" placeholder="请输入员工工资">
    <input type="text" id="job" placeholder="请输入员工岗位">
    <button onclick="addEmp()">添加员工</button>
    <table border="1px">
        <caption>员工表</caption>
        <tr>
            <th><b>姓名</b></th>
            <th><b>工资</b></th>
            <th><b>岗位</b></th>
        </tr>
    </table>
<script>
    let arr = [];
    function addEmp(){
        //获取输入框中的数据
        let name = document.querySelector('#name').value;
        let salary = document.querySelector('#salary').value;
        let job = document.querySelector('#job').value;
        console.log(name,typeof name);
        console.log(salary,typeof name);
        console.log(job,typeof name);

        //创建一个tr，三个td
        let tr = document.createElement('tr');
        let nameTd = document.createElement('td');
        let salaryTd = document.createElement('td');
        let jobTd = document.createElement('td');

        //将输入的数据添加到td中
        nameTd.innerHTML = name;
        salaryTd.innerHTML = salary;
        jobTd.innerHTML = job;
        //将td添加到tr中
        tr.append(nameTd,salaryTd,jobTd);
        //将tr添加到table中
        document.querySelector('table').append(tr);
        //清空输入框
        document.querySelector('#name').value = '';
        document.querySelector('#salary').value = '';
        document.querySelector('#job').value = '';
        //将收集到的数据装入数组中
        arr.push({name:uName,salary:uSalary,job:uJob});
        console.log(arr);
    }
</script>
</body>
</html>